<template>
  <div class="bg">
    <nav-com
      title="帮我付"
      :showView='true'
      @back="backHandler()"
    ></nav-com>
    <div class="good_info">
      <div class="img">
        <img
          :src="details.image"
          style="width:15vw"
        >
      </div>
      <div class="info">
        <div style="height:10vw">{{details.title}}</div>
        <div style="color:#e46424">￥{{details.price}}</div>
        <div style="float:right; margin: -4.5vw 0 0 60vw;color:#ccc">×1</div>
      </div>
    </div>
    <div class="pay-info">
      <div class="title">应付金额</div>
      <div class="money-time">
        <div class="money">￥{{details.price}}</div>
        <div class="time">付款倒计时 
          <time-down :endTimes="tomorrowTime" endText="已经结束了"></time-down>
        </div>
      </div>
    </div>
    <div class="remarks">
      <div class="title">备注</div>
      <van-field
        v-model="remarks"
        rows="3"
        autosize
        type="textarea"
        placeholder="请输入留言"
        style="background:#F8F8F8;min-height:15vh"
      />
    </div>
    <div class="find-people">
      <div class="title">自选平台代付人</div>
      <van-field
      :disabled='disabled'
      style="padding:10px 0"
        v-model="friendMobile"
        label="手机号"
        placeholder="请输入手机号"
      />
    </div>
    <div class="btn-bottom" v-if="!disabled">
      <div
        class="btn"
        @click="submit"
      >确定</div>
    </div>
    <van-overlay
      :show="show"
      @click="show = false"
    >
      <div class="popup">
        <div class="pay-msg">{{payMsg}}</div>
        <div
          v-if="type==1"
          class="pay-detail"
        >{{payDetail}}</div>
        <van-field
          
          v-else-if="type==2"
          v-model="friendMobile"
          placeholder="请输入朋友手机号"
        />
        <div class="pay-btns">
          <div
            v-if="btn_type==3"
            class="two-btn"
          >
            <div
              class="btn-0 btn-1"
              @click="no(two_btn)"
            >{{btn1}}</div>
            <div
              class="btn-0 btn-2"
              @click="yes(two_btn)"
            >{{btn2}}</div>
          </div>
          <div
            v-else-if="btn_type==2"
            class="one-btn"
          >我知道了</div>
          <div
            v-else-if="btn_type==1"
            class="one-btn2"
            @click="iKnow"
          >知道了</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import {
  payUseOther,
  isDFOrder,
  getItems2,
  submitPFM,
  refusePFM,
  getDFInfo
} from "@/api/api";
import navCom from "@/component/nav";
import timeDown from "@/component/timeDown"
import { Toast } from "vant";
export default {
  components: {
    navCom,
    timeDown
  },
  data() {
    return {
      remarks: "亲，我有一笔订单待支付，快帮我付个款吧？",
      friendMobile: "",
      show: false,
      payMsg: "支付成功",
      payDetail: "亲，您的代付请求已发送给对方，等待对方支付",
      type: 1,
      btn_type: 1,
      order_sn: "",
      details: "",
      id: "",
      btn1: "",
      btn2: "",
      two_btn: 0,
      tomorrowTime: 0,
      disabled:false
    };
  },
  mounted() {
    
    console.log(66, this.$route);
    this.order_sn = this.$route.params["order_sn"];
    this.id = this.$route.params["id"];
    console.log(this.tomorrowTime)
    this.DFInfo()
    this.getGoodInfo(this.id);
    // if (!this.id) {
    //   this.has_patForOther_order();
    // }
  },
  methods: {
    iKnow(){
      this.$router.push('/orders/0')
    },
    // callback(){},
    // 已经代付过的信息
    DFInfo(){
      getDFInfo({order_sn: this.order_sn}).then((result) => {
        console.log(result)
        if(result.data.data.mobile){
          this.disabled = true
          this.friendMobile = result.data.data.mobile
          this.tomorrowTime = String(Date.now()/1000 + result.data.data.left_second)
        }else{
          this.tomorrowTime = String(Date.now()/1000 + 20*60)
        }
      }).catch((err) => {
        
      });
    },
    no(two_btn) {
      refusePFM({ order_sn: this.order_sn }).then((res) => {
        Toast(res.data.msg);
        setTimeout(()=>{
          this.backHandler()
        },1000)
      });
    },
    yes(two_btn) {
      submitPFM({ order_sn: this.order_sn }).then((res) => {
          if (res.data.code == 1) {
            this.$router.push({ name: "qrCodePay", order_sn: this.order_sn });
          }
        });
      // if (two_btn == 0) {
      //   this.payMsg = "代付请款";
      //   this.payDetail = `亲，你确认要帮好友付款吗？`;
      //   this.btn1 = "否";
      //   this.btn2 = "是";
      //   this.btn_type = 3;
      //   this.two_btn = 1;
      //   this.show = true
      // } else {
      //   submitPFM({ order_sn: this.order_sn }).then((res) => {
      //     if (res.data.code == 1) {
      //       this.$router.push({ name: "qrCodePay", order_sn: this.order_sn });
      //     }
      //   });
      // }
    },
    // 商品信息
    getGoodInfo(id) {
      getItems2({ id }).then((res) => {
        this.LOADING = false;
        console.log(res);
        this.details = res.data.data;
      });
    },

    // 是否有代付订单
    has_patForOther_order() {
      isDFOrder().then((res) => {
        if (res.data.code == 1) {
          this.order_sn = res.data.data.order_sn;
          this.getGoodInfo(res.data.data.goods_id);
          this.payMsg = "请求代付";
          this.payDetail = `亲，您有一个来自${res.data.data.nickname}的代付订单，确认帮付款吗？`;
          this.show = true;
          this.btn1 = "拒绝支付";
          this.btn2 = "确认支付";
          this.btn_type = 3;
          this.two_btn = 0;
        }
      });
    },
    backHandler() {
      this.$router.go(-1);
    },
    // 手机号验证
    mobileCheck(value){
      const regex = /^1[3456789]\d{9}$/;//使用此正则即可
      if (!regex.test(value))  return false
      return true
    },
    submit() {
      let is_phone = this.mobileCheck(this.friendMobile)
      if(!is_phone){
        Toast("手机号格式不正确")
        return
      }
      let queryData = {
        order_sn: this.order_sn,
        type: "wechat",
        remark: this.remarks,
        mobile: this.friendMobile,
      };
      payUseOther(queryData)
        .then((result) => {
          console.log(result);
          if (result.data.code == 1) {
            if (result.data.data.type === "qrcode") {
              this.$router.push({
                name: "qrCodePay",
                params: { order_sn: this.order_sn },
              });
            } else {
              this.payMsg = "代付请求";
              this.payDetail = "亲，您的代付请求已发送给对方，等待对方支付";
              this.type = 1;
              this.btn_type = 1;
              this.show = true;
            }
          } else {
            this.$dialog.alert({
              title: "提示",
              message: result.data.msg,
            });
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
.pay-btns {
  margin-top: 4vh;
}
.popup .pay-btns .one-btn2 {
  text-align: center;
  margin: 0 auto;
  margin-bottom: 10px;
  /* margin-top: 2vh; */
  width: 28vw;
  height: 10vw;
  line-height: 10vw;
  border-radius: 1vw;
  border: 1px solid #f85230;
  color: #f85230;
}
.popup .pay-btns .one-btn {
  text-align: center;
  margin: 0 auto;
  margin-bottom: 10px;
  /* margin-top: 2vh; */
  width: 28vw;
  height: 10vw;
  line-height: 10vw;
  border-radius: 1vw;
  background: #f85230;
  color: #fff;
}
.popup .pay-btns .two-btn {
  display: flex;
  justify-content: space-around;
}
.popup .pay-btns .two-btn .btn-0 {
  /* margin-top: 2vh; */
  width: 28vw;
  height: 8vw;
  line-height: 8vw;
  border-radius: 1vw;
}
.btn-1 {
  background: #f5f5f5;
  color: #666666;
}
.btn-2 {
  background: #f85230;
  color: #fff;
}
.popup .pay-detail {
  margin: 0 6vw;
  margin-top: 1.5vh;
  height: 10vw;
}
.popup .pay-msg {
  margin-top: 10vh;
  font-size: 5vw;
}
.popup {
  text-align: center;
  position: absolute;
  top: 30vh;
  left: 10vw;
  min-height: 30vh;
  width: 80vw;
  background: url("../../../assets/index/pfm.png");
  background-size: 100% 100%;
}
.btn-bottom {
  position: absolute;
  bottom: 0vh;
  width: 100vw;
  background: #fff;
  height: 15vw;
}
.btn {
  margin: 3vw;
  height: 10vw;
  background: #e46424;
  border-radius: 5vw;
  text-align: center;
  line-height: 10vw;
  color: #fff;
}
.find-people {
  padding: 2vw;
  background: #fff;
  margin: 5vw;
}
.remarks {
  margin: 5vw;
  padding: 2vw;
  background: #fff;
}
.pay-info {
  padding: 2vw;
  background: #fff;
  margin: 5vw;
}
.pay-info .money-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2vw 0;
}
.pay-info .money-time .money {
  font-size: 8vw;
  color: #e46424;
}
.title {
  font-size: 4.3vw;
  line-height: 10vw;
  border-bottom: 1px solid #eee;
}
.good_info {
  padding: 2vw;
  background: #fff;
  display: flex;
  margin: 5vw;
}
.good_info .img {
  background: #eee;
  width: 15vw;
  height: 15vw;
}
.good_info .info {
  margin-left: 5vw;
}
.bg {
  background: #f8f8f8;
  height: 100vh;
  position: relative;
}
</style>